<template>
  <div>
    <div>
      <el-container style="height: 60px; border: 1px solid #eee" direction="vertical">
        <el-header>
          <div class="logo-content">
            <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;">
              <div class="imglogo">
                <img src="../../public/img.png" alt="农产品融销一体平台">
                <span>农产品融销一体平台</span>
              </div>
              <div class="userin" v-if="$store.state.loginUserNickname === ''" style="margin-left: 800px">
                <span @click="Login" class="login">登录</span> |
                <span @click="Register" class="register">注册</span>
              </div>
              <div class="userin" v-else style="margin-left: 800px">
                <span>欢迎您 {{ $store.state.loginUserNickname }}</span>
              </div>
            </div>
          </div>
        </el-header>
      </el-container>
    </div>
    <div class="menu-content" v-cloak>
      <el-menu
          :default-active="$store.state.activeIndex"
          mode="horizontal"
          @select="handleSelect"
          background-color="#42b983"
          text-color="#fff"
          active-text-color="#ffd04b"
          id="menu"
      >
        <el-menu-item index="1" class="item" @click="frontBtn">
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="2" class="item" @click="goodsBtn">
          <span slot="title">商品货源</span>
        </el-menu-item>
        <el-menu-item index="3" class="item" @click="purchaseBtn">
          <span slot="title">求购需求</span>
        </el-menu-item>
        <el-menu-item index="4" class="item" @click="knowledgesBtn">
          <span slot="title">农业知识</span>
        </el-menu-item>
        <el-menu-item index="5" class="item" @click="guideBtn">
          <span slot="title">专家指导</span>
        </el-menu-item>
        <el-menu-item index="6" class="item" @click="shopCartBtn">
          <span slot="title">购物车</span>
        </el-menu-item>
        <el-submenu index="7">
          <template slot="title">融资申请</template>
          <el-menu-item index="7-1" @click.native="smartMatchBtn">智能匹配</el-menu-item>
          <el-menu-item index="7-2" @click.native="financingBtn">融资申请</el-menu-item>
        </el-submenu>
        <div class="userin" v-if="$store.state.loginUserNickname == ''"></div>
        <el-submenu index="8" v-else>
          <template slot="title">设置</template>
          <el-menu-item index="8-1" @click.native="userPage">个人中心</el-menu-item>
          <el-menu-item index="8-3" @click="userManage" v-if="$store.getters.isAdmin">用户管理</el-menu-item>
          <el-menu-item index="8-4" @click.native="goodsManage" v-if="$store.getters.isAdmin">商品管理</el-menu-item>
          <el-menu-item index="8-6" @click.native="logout">退出</el-menu-item>
        </el-submenu>
        <el-submenu index="9">
          <template slot="title">销售情况图</template>
          <el-menu-item index="9-1" @click.native="echartsBtn">销售额</el-menu-item>
          <el-menu-item index="9-2" @click.native="echarts2Btn">销量</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
// 用户输入密码时加密使用
// encode为加密，decode为解密
let Base64 = require("js-base64");
export default {
  name: "NavigationBar",
  data() {
    return {
      avatar: "",
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    Login() {
      this.$router.push("/login");
    },
    Register() {
      this.$router.push("/register");
    },
    logout() {
      this.$store.commit("updateLoginUserNickname", "");
      this.$store.commit("removeStorage");
      this.$router.push("/home").catch((err) => err);
      if (sessionStorage.getItem("/order/needs/pageCode")) {
        sessionStorage.removeItem("/order/needs/pageCode");
      }
      if (sessionStorage.getItem("/order/goods/pageCode")) {
        sessionStorage.removeItem("/order/goods/pageCode");
      }
      if (sessionStorage.getItem("/user/search/pageCode")) {
        sessionStorage.removeItem("/user/search/pageCode");
      }
    },
    frontBtn() {
      this.$router.push("/home/front").catch((err) => err);
    },
    purchaseBtn() {
      this.$router.push("/home/purchase").catch((err) => err);
    },
    goodsBtn() {
      this.$router.push("/home/goods").catch((err) => err);
    },
    knowledgesBtn() {
      this.$router.push("/home/knowledge").catch((err) => err);
    },
    guideBtn() {
      this.$router.push("/home/guide").catch((err) => err);
    },
    shopCartBtn() {
      this.$router.push("/home/shopcart").catch((err) => err);
    },
    userPage() {
      this.$router.push("/home/user").catch((err) => err);
    },
    addMessagePage() {
      this.$router.push("/home/addmessage").catch((err) => err);
    },
    handleAbout() {
      this.$router.push("/home/aboutUs").catch((err) => err);
    },
    goodsManage() {
      this.$router.push("/home/userGood/publishedgoodsAdmin").catch((err) => err)
    },
    userManage() {
      this.$router.push("/home/usermanage").catch((err) => err);
    },
    financingBtn() {
      this.$router.push("/home/financing").catch((err) => err);
    },
    smartMatchBtn() {
      this.$router.push("/home/smartMatch").catch((err) => err);
    },
    echartsBtn() {
      this.$router.push("/home/echarts").catch((err) => err);
    },
    echarts2Btn(){
      this.$router.push("/home/echarts2").catch((err) => err);
    }
  },
  created() {
    this.$store.commit("updateActiveIndex", "1");
    if (window.localStorage.token) {
      let token = window.localStorage.token;
      let arr = token.split(".");
      let res = Base64.decode(arr[1]);
      this.$store.commit("updateLoginUserNickname", JSON.parse(res).nickname);
      this.$store.commit("updateLoginUserAvatar", JSON.parse(res).avatar);
      this.$store.commit("updateRole", JSON.parse(res).role);
    }

  }
}
</script>

<style lang="less" scoped>
.navigation-bar {
  width: 100%;
}

.initiator {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #035D1C;
  padding: 5px 20px;
}

.logo-content {
  color: #035D1C;
  text-align: center;
}

.logo-text {
  margin-left: 10px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.menu-content {
  height: 42px;
}

.el-menu {
  width: 1100px;
  margin: 0 auto;
  height: 40px;
}

.el-menu-item {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  margin-right: 34px;
}

.template {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.el-submenu__title {
  line-height: 40px;
  height: 40px;
}

.el-menu-item {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.login {
  cursor: pointer;
}

.register {
  cursor: pointer;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.menu-content /deep/ .el-submenu__title i {
  color: #fff;
}

[v-cloak] {
  display: none;
}

</style>